<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="../js/vue.js"></script>
</head>

<body>
	<div id="app">
		<h2>上一页下一页按钮动态显示</h2>
		<div>
			<button v-show="pno >1" @click="onLast">上一页</button>
			<span>第{{pno}}页/共{{pcount}}页</span>
			<button v-show="pno<pcount" @click="onNext">下一页</button>
		</div>

	</div>
	<script>
		//页面需要显示: 
		//当前第几页pno和共几页 pcount
		//每单击下一页按钮，pno+1
		//只有pno<pcount时，下一页按钮才显示！
		//每单击上一页按钮，pno-1
		//只有pno>1时，上一页按钮才显示！
		var vm = new Vue({
			el: "#app",
			data: {
				pno: 1,
				pcount: 5
			},
			methods: {
				onNext() {
					this.pno++;
				},
				onLast() {
					this.pno--;
				}
			}
		})
	</script>
</body>

</html>